<template>
    <div>
        <div class="ban" @click="hanbtn" >
            <img class="ban-img" :src="bannerImg">
            <div class="ban-info" style="background: linear-gradient(to top , #000 0%, #567 50%);">
                <div class="ban-title">{{this.sightName}}</div>
                <div class="ban-number"><span class="iconfont">&#xe632;</span>{{this.bannerImg.length}}</div>
            </div>
        </div>
				<!--动画组件和画廊插槽组件 -->
        <fadeanim class="ss">
            <comga :imgs="gallaryImgs" v-show="showgao"
                @clos="hanclos"
            ></comga> 
        </fadeanim>
    </div>
</template>

<script>
import comga from 'com/gallary/gallary'
import fadeanim from 'com/fade/fade'
export default {
    name:'detail',
    props:{
         sightName:String,
         gallaryImgs:Array,
         bannerImg:String
    },
    data(){
        return{
           showgao:false,
					 imgs:[
						 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg',
						 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg'
					 ]
        }
    },
    methods: {
        hanbtn(){
           this.showgao=true
        },
        hanclos(){
            this.showgao=false
        }
    },
    components: {
        comga,
        fadeanim
    }
}
</script>
<style lang="stylus" scoped>
      @import '~styles/varibles.styl'
      .ban
        position relative
        height 0
        padding-bottom 55.7%
        .ban-img
         width 100%
        .ban-info
           display flex
           position absolute
           left 0
           right 0
           bottom 0
           z-index 2
           color #fff
           line-height .6rem
           .ban-title
                width 100%
                flex 1
                font-size .26rem
                padding 0 .2rem
            .ban-number
                margin-top .14rem
                height .42rem
                padding 0 .4rem
                line-height .42rem
                height .4rem
                border-radius .06rem  
                // background rgba(0,0,0,.8)
                font-size .24rem
                .banner-icon
                    font-size .24rem
</style>
